<script setup lang="ts">
import { computed, ref } from 'vue'
import type { Doctor } from '@/types/doctor'
import { onLoad } from '@dcloudio/uni-app'
import { DoctorC } from '@/types/doctorC'
import { deleteOssImg } from '@/services/medicine'
import { useMemberStore } from '@/stores'
import { getDoctor, submitAPI } from '@/services/doctor'

const formData = ref<Doctor>(<Doctor>new DoctorC())
const photoFront = computed(() => {
  if (formData.value.photoFront) {
    return {
      url: formData.value.photoFront,
      name: '',
      extname: '',
    }
  }
})
const badgesPhoto = computed(() => {
  if (formData.value.badgesPhoto) {
    return {
      url: formData.value.badgesPhoto,
      name: '',
      extname: '',
    }
  }
})

onLoad(async (query?: AnyObject) => {
  if (query?.id) {
    formData.value = await getDoctor(query.id)
  }
})

async function submit() {
  const memberStore = useMemberStore()
  formData.value.id = memberStore.profile!.doctor!.id
  console.log('提交的数据是：', formData.value)
  memberStore.profile!.doctor = await submitAPI(formData.value)
  await uni.showToast({
    title: '审核资料已提交',
    icon: 'success',
  })
  setTimeout(() => uni.navigateBack(), 1500)
}

function genderChange(event: UniHelper.RadioGroupOnChangeEvent) {
  formData.value!.sex = parseInt(event.detail.value)
}

function selectedImgs(e: UniHelper.UniFilePickerOnSelectEvent, imgKey: 'photoFront' | 'badgesPhoto') {
  for (let tempFilePath of e.tempFilePaths) {
    uploadFile(tempFilePath, imgKey)
  }
}

function uploadFile(tempFilePath: string, imgKey: 'photoFront' | 'badgesPhoto') {
  uni.uploadFile({
    url: '/medicine/oss/upload',
    name: 'file',
    filePath: tempFilePath,
    success: (res) => {
      if (res.statusCode === 200) {
        formData.value[imgKey] = JSON.parse(res.data).data
        console.log(imgKey + ' 图片上传完成：' + formData.value[imgKey])
      }
    },
  })
}

async function delImg(imgKey: 'photoFront' | 'badgesPhoto') {
  await deleteOssImg(<string>formData.value[imgKey])
  console.log(imgKey + ' 图片删除成功：' + formData.value[imgKey])
  formData.value[imgKey] = undefined
}
</script>

<template>
  <view class="container">
    <view class="uni-container">
      <uni-forms ref="form" :value="formData" validate-trigger="submit" err-show-type="toast">
        <uni-forms-item name="photo_front" label="医生照片">
          <uni-file-picker :value="photoFront"
                           @select="selectedImgs($event, 'photoFront')"
                           @delete="delImg('photoFront')"
                           mode="grid" :limit="1" file-mediatype="image"
          >
          </uni-file-picker>
        </uni-forms-item>

        <uni-forms-item name="badges_photo" label="医生胸卡照片">
          <uni-file-picker :value="badgesPhoto"
                           @select="selectedImgs($event, 'badgesPhoto')"
                           @delete="delImg('badgesPhoto')"
                           mode="grid" :limit="1" file-mediatype="image"
          >
          </uni-file-picker>
        </uni-forms-item>

        <uni-forms-item name="name" label="姓名">
          <uni-easyinput placeholder="请输入姓名" v-model="formData.name" trim="both"></uni-easyinput>
        </uni-forms-item>

        <uni-forms-item name="sex" label="性别">
          <radio-group @change="genderChange">
            <label class="radio">
              <radio value="0" checked color="$mainColor" />
              男
            </label>
            <label style="margin-left: 100rpx;" class="radio">
              <radio value="1" color="$mainColor" />
              女
            </label>
          </radio-group>
        </uni-forms-item>

        <uni-forms-item name="age" label="年龄">
          <uni-easyinput placeholder="请输入年龄" type="number" v-model="formData.age"></uni-easyinput>
        </uni-forms-item>

        <uni-forms-item name="degree" label="学位">
          <uni-easyinput placeholder="请输入学位" v-model="formData.degree" trim="both"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="position" label="职称">
          <uni-easyinput placeholder="请输入职称" v-model="formData.position" trim="both"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="section_office" label="科室">
          <uni-easyinput placeholder="请输入科室" v-model="formData!.sectionOffice" trim="both"></uni-easyinput>
        </uni-forms-item>

        <uni-forms-item name="specialty" label="专长">
          <uni-easyinput placeholder="请输入专长" v-model="formData.specialty" trim="both"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="hospital" label="就职医院">
          <uni-easyinput placeholder="请输入就职医院" v-model="formData.hospital" trim="both"></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="clinical_experience" label="临床经验">
          <uni-easyinput placeholder="请输入临床经验" v-model="formData.clinicalExperience"
                         trim="both"></uni-easyinput>
        </uni-forms-item>
      </uni-forms>
    </view>

    <button class="submit-button" @click="submit" type="warn">提交</button>
  </view>
</template>

<style lang="scss">
.container {
  background-color: #FFFFFF;
  padding-bottom: 1px;

  .uni-container {
    margin-bottom: 30px;
    padding: 15px;
  }

  .submit-button {
    line-height: 2;
    font-size: 16px;
    // background-color: #00e676;
    position: fixed;
    bottom: 5px;
    left: 20px;
    right: 10px;
    border-radius: 20px;
  }
}
</style>
